<template>
  <div>
    <van-grid :column-num="2" :border="false">
      <div v-for="item in CategoryList" :key="item.id">
        <van-grid-item :to="'/goodsDetail/' + item.id">
          <template slot="icon">
            <van-image :src="item.list_pic_url" />
          </template>
          <template slot="text">
            <span style="margin-bottom: 10px; font-size: 13px">{{
              item.name
            }}</span>
            <span style="color: red; font-size: 16px"
              >￥ {{ item.retail_price }}</span
            >
          </template>
        </van-grid-item>
      </div>
    </van-grid>
  </div>
</template>

<script>
import { getGoodsCategoryList } from "@/api/yangyang/Classify";
export default {
  name: "articleList",
  props: {
    // 接受的父组件传过来的categoryId
    categoryId: {
      type: Number,
      required: true,
    },
  },
  data() {
    return {
      CategoryList: [], //对应导航的数据
    };
  },
  created() {
    this.getGoodsCategoryList();
  },
  methods: {
    async getGoodsCategoryList() {
      let res = await getGoodsCategoryList({
        categoryId: this.categoryId,
        size: 100,
      });
      this.CategoryList = res.data.data.data;
    },
  },
};
</script>

<style lang="less" scoped>
/deep/ .van-grid > div {
  width: 370px;
  font-size: 13px !important;
}
/deep/ .van-grid-item__content van-grid-item__content--center {
  font-size: 13px !important;
}
/deep/ .van-image__img {
  width: 240px;

  height: 160px;
  text-align: center;
  margin-bottom: 30px;
}
</style>